<template>
    <div>
        <div class="class-header">
            <div class="class-swipe">
                <div class="item" v-for="(item,index) of oneCateList" :key="index" @click="getTwoCategory(item.id)">
                    <van-image
                        use-loading-slot
                        class="grid-pic"
                        :src="item.pic"
                        width="150"
                        height="100"
                    >
                        <van-loading slot="loading" type="spinner" size="20" vertical />
                    </van-image>
                    <p class="new-title">{{item.name}}</p>
                </div>
            </div>
            <router-link to="/productList"><van-icon name="search"></van-icon></router-link>
            <router-link to="/cart">
            <van-tag class="tag" color="#3DCEB9" round>{{cartNum}}</van-tag>
            <van-icon name="shopping-cart-o"></van-icon>
            </router-link>
        </div>
        <div class="goods">
            <van-sidebar v-model="activeKey">
                <van-sidebar-item :title="item.name" v-for="item of twoCateList" :key="item.id"  @click="getThreeCategory(item.id)"/>
            </van-sidebar>
            <div class="content" id="content">
                <div class="three">
                    <p>{{three_name}}</p>
                    <i class="iconfont icon-leimupinleifenleileibie" @click="three_active = !three_active"></i>
                    <!-- <van-icon name="arrow-left" />
                        <div class="three-list">
                            <p class="item" :class="threeActive == item.id?'active':''" v-for="item of threeCateList" :key="item.id">{{item.name}}</p>
                        </div>
                    <van-icon name="arrow" /> -->
                </div>
                <div class="goods-list">
                    <!-- <p class="no-data" v-if="!goodsList.length">暂无商品~</p> -->
                    <van-empty v-if="!goodsList.length"  description="暂无商品~" />
                    <van-card
                    v-for="(item,index) of sortStudent"
                    :key="index"
                    :price="getPrice(item)"
                    :title="item.goods_name"
                    :thumb="item.image"
                    :thumb-link="env =='development'?'/#/goodInfo?id='+item.goods_id:'/sxplat/#/goodInfo?id='+item.goods_id"
                    >
                        <template #desc>
                            <div class="desc-content">
                               <p>{{item.goods_info}} </p>
                               <p>库存:{{item.stock}}</p>
                            </div>
                        </template>
                        <template #footer>
                            <!-- <router-link :to=""> -->
                                <!-- <van-icon class="cart-icon" name="cart-circle" /> -->
                            <!-- </router-link> -->
                            <van-stepper v-model="item.cate_num.num"  min="0" @change="onChangeNum(item)" theme="round" button-size="22"/>
                        </template>
                    </van-card>
                </div>
            </div>
        </div>
        <van-popup v-model="three_active" position="top" :style="{ height: '90%' }" get-container="#content" :overlay="false">
            <van-grid :column-num="2">
                <van-grid-item v-for="item of threeCateList" :key="item.id" @click="getGoods(item)">
                    <van-image :src="item.pic" class="three-pic"/>
                    <p class="new-title">{{item.name}}</p>
                </van-grid-item>
            </van-grid>
        </van-popup>
    </div>
</template>
<script>
import { OneCategory,CartNum,TwoCategory,ThreeCategory,NumCart,DelCart,AddCart } from "../ajax";
import {Toast} from 'vant'
export default {
    data() {
        return {
            oneCateList: [],
            twoCateList:[],
            threeCateList:[],
            goodsList:[],
            cartNum:0,
            activeKey:0,
            threeActive:6,
            env:null,
            cate_id:null,
            three_active: false,
            three_name: ''
        };
    },
    created() {
        this.env = process.env.NODE_ENV
        this.getOneCategory();
        this.getCartNum();
        this.getTwoCategory(this.$route.query.id);
    },
    computed:{
        sortStudent(){
            return this.sortByKey(this.goodsList, 'sort')
        }
    },
    methods: {
        sortByKey(array, key) {
            return array.sort(function (a, b) {
                var x = a[key];
                var y = b[key];
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
            });
        },
        getPrice(item){
            return parseFloat(item.is_activity?item.act_price:this.$store.getters.wxUserInfo.is_believe?item.price:item.ot_price).toFixed(2)
        },
        onChangeNum(item){
            this.$store.commit('edit_cart',{item,cate_id:this.cate_id});
        },
        getOneCategory() {
            const data = {
                admin_id: this.$store.getters.admin_id
            };
            OneCategory(data).then(res => {
                // console.log(res);
                this.oneCateList = res;
            });
        },
        getTwoCategory(id){
            const data = {
                admin_id:this.$store.getters.admin_id,
                id
            }
            TwoCategory(data).then(res=>{
                this.twoCateList = res;
                if(res){
                    this.getThreeCategory(res[0].id);
                }else{
                    this.cate_id = null;
                    this.goodsList = [];
                    this.threeCateList = [];
                }
            })
        },
        getThreeCategory(id){
            // console.log(this.$store.getters.wxUserInfo.company_address);
            const data = {
                admin_id:this.$store.getters.admin_id,
                id,
                center_ids:(this.$store.getters.wxUserInfo.center_ids).toString(),
                group_id:this.$store.getters.wxUserInfo.group_id
            }
            ThreeCategory(data).then(res=>{
                this.threeCateList = res;
                // console.log(res);
                // console.log(res.length);
                    let arr = Object.keys(res)
                    // console.log(arr);
                    if(arr.length){
                        for(let i in res){
                            // this.getGoods(i);
                            this.getGoods(res[i]);
                            break;
                        }
                    }else{
                        this.cate_id = null;
                        this.goodsList = [];
                    }

            })
        },
        getGoods(item){
            // console.log(item);
            this.three_name = item.name;
            this.three_active = false;
            if(item){
                this.threeActive = item.id;
                this.cate_id = item.id;
                for(let i of item.goods){
                    if(!i.cate_num) i.cate_num = {num:0};
                }
                this.goodsList = item.goods?item.goods:[];
            }else{
                this.threeActive = "";
                this.cate_id = null;
                this.goodsList = [];
            }
        },
        getCartNum() {
            const data = {
                uid:this.$store.getters.wxUserInfo.id,
                group_id:this.$store.getters.wxUserInfo.group_id,
                admin_id:this.$store.getters.admin_id
            }
            CartNum(data).then(res=>{
                // console.log(res);
                this.cartNum = res;
            })
        }
    }
};
</script>
<style lang="scss" scoped>
    $green:#3DCEB9;
    $white:#fff;
    $black:#333;
.class-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    padding-right: 1rem;
        a{
            position: relative;
            .van-icon{
                font-weight: bolder;
                color: #000;
            }
            .tag{
                position: absolute;
                z-index: 1000;
                top: -0.4rem;
                left: 0.9rem;
            }
        }
    .class-swipe {
        height: 5rem;
        width: 80%;
        border-top: 1px solid #ededed;
        border-bottom: 1px solid #ededed;
        font-size: 0.9rem;
        text-align: center;
        display: flex;
        align-items: center;
        overflow: auto;
        box-shadow: inset -20px 0px 10px -10px #f5f5f5;
        .item {
            padding:0 0.2rem;
            // overflow: hidden;
            .grid-pic {
                width: 2.5rem !important;
                height: 2.5rem !important;
            }
            .new-title{
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
            }
        }
    }
}
.van-sidebar-item--select{
    border-color:$green
}
.goods{
    display: flex;
    justify-content: space-between;
    .content{
        width: 75%;
        position: relative;
        overflow: hidden;
        .van-popup{
            position: absolute;
            top: 3rem;
            .three-pic{
                width:3.5rem;
                height: 3.5rem;
            }
            .new-title{
                color: $black;
                line-height: 2rem;
            }
        }
        .goods-list{
            width: 100%;
            height: calc(100vh - 11rem);
            overflow: auto;
            .desc-content{
                width: 100%;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
            }
            .van-card{
                background: $white;
            }
            .van-card__title{
                font-size: 0.8rem;
            }
            >>> .van-stepper__minus, >>>.van-stepper__plus{
                border-radius: 50%;
                color: $white;
                background: $white;
            }
            >>> .van-stepper__minus{
                border:0.04rem solid $green;
                color:#333
            }
            >>> .van-stepper__plus{
                background: $green;
            }
            >>> .van-stepper__input{
                background: #fff;
            }
        }
        .van-card__footer{
            color: $green;
            position: absolute;
            top: 4.5rem;
            right:1rem;
        }
        .three{
            display: flex;
            align-items: center;
            justify-content: space-around;
            height: 3rem;
            .iconfont{
                position: absolute;
                right: 1rem;
                font-size: 1.4rem;
                text-align: right;
            }
        }
    }
}
</style>